{% extends "index.htm" %}

{% block nav %}
    <!--
	<div class="page">
		<div class="nav-bar bg-color-blueDark">
			<div class="nav-bar-inner">
				<span class="pull-menu"></span>
				<span class="element">{{ page_brand }}</span>
				<span class="divider"></span>
				<ul class="menu">
					<li data-role="dropdown">
						<a href="#">Документацiя</a>
						<ul class="dropdown-menu">
							<li><a href="#">Вікно прийому платжів</a></li>
							<li><a href="#">Єдине вікно переказів</a></li>
						</ul>
					</li>
					<li><a href="#">БПК</a></li>
					<li><a href="#">Тарифи</a></li>
					<li><a href="#">Валюта</a></li>
					<li><a href="#">Компенсація</a></li>
					<li><a href="#">Гаряча лінія</a></li>
					<li data-role="dropdown"><a href="#">Перерва</a></li>
				</ul>
			</div>
		</div>
	</div>
	-->
{% endblock %}

{% block page_header %}
	<div class="page-header bg-color-blueDark" style="height:70px">
		<div class="page-header-content">
			<a href="/" class="back-button white page-back" style="top:20px;left: 10px"></a>
			<h2 class="fg-color-white" style="top:20px;left:50px">{{ page_brand }}</h2>
		</div>
	</div>
{% endblock %}

{% block sidebar %}
	<div class="page-sidebar bg-color-white" style="padding-top: 0px;">
        <ul class="accordion bg-color-white" data-role="accordion">
        {% for key,values in menu.items %}
        <li><a href="#">{{ key }}</a>
        <div style="padding: 0px;">
            <ul class="bg-color-white" style="padding: 5px">
            {% for value in values %}
                <li><a href="#" onclick="Dajaxice.documentation.fill_table(Dajax.process, {'mt':'{{ value }}'}); return false">{{ value }}</a></li>
            {% endfor %}
            </ul>
        </div>
        </li>
        {% endfor %}
        </ul>
	</div>
{% endblock %}

{% block main %}
    <div  class="page-region">
        <!--div class="row" style="padding:10px">
            <div class="toolbar" style="height: 32px">
                <button><i class="icon-backspace"></i></button>
            </div>
        </div-->
        <div style="padding-top:10px;" align="right">
        <button class="image-button bg-color-darken fg-color-white" onclick="Dajaxice.documentation.all_data(Dajax.process);">
            Показать все<i class="icon-eye bg-color-green"></i>
        </button>
        </div>
        <div id="ajax-table" style="padding-left:10px;padding-top: 1px;padding-right: 10px;">
            <table class="hovered bordered">
                <thead>
                <tr>
                    <td>Назва документа</td><td>Посилання</td><td>Опис</td>
                </tr>
                </thead>
                <tbody>
                {% for doc in Docs %}
                    <tr>
                        <td>{{ doc.title }}</td>
                        <td style="width:100px;"><a href="{{ doc.material.url }}">Відкрити</a></td>
                        <td style="width:100px;">
                            <button class="image-button bg-color-blueDark fg-color-white btDesc" style="margin-bottom: 0;margin-right: 0;" onclick="showDescription('{{ doc.title }}','{{ doc.description|safe }}')">Опис<i class="icon-book bg-color-green"></i></button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
